<script lang="ts" setup>
import {ref, shallowRef } from 'vue';
import BaseInfo from './components/BaseInfo.vue'
import PassChange from './components/PassChange.vue'
import BlogView from './components/BlogView.vue'
import {getTimer} from '@/utils/index'
import { useUsererStore } from '@/stores/user';
const userStore = useUsererStore()
type componentType = {
    title: string
    com: any
}
const componentList: Array<componentType> = [
    {
        title: '基本信息',
        com: BaseInfo
    },
    {
        title: '密码修改',
        com: PassChange
    },
    {
        title: '帖子管理',
        com: BlogView
    }
]

let checkTab = ref(0)

const isCom = shallowRef<any>(PassChange)
const tabswitch = (ele: componentType, idx: number) => {
    checkTab.value = idx
    isCom.value = ele.com
}
</script>

<template>
    <div class="bg-slate-50 pt-4 container md:flex items-start">
        <div class="md:w-2/12 md:mr-3">
            <!-- tab -->
            <div class="border pb-3 bg-white">
                <img src="https://www.houdunren.com/images/boy.png" alt="">
                <div>
                    <p class="text-center font-bold">{{userStore.userInfo?.realname}}</p>
                    <p class="text-center text-xs">注册于{{getTimer(userStore.userInfo?.createdAt as Date)}}</p>
                </div>
            </div>
            <div class="border border-b-0 mt-4 bg-white">
                <div
                v-for="(ele, idx) in componentList" @click="tabswitch(ele, idx)"
                class="border-b cursor-pointer py-3 px-3 pl-3 text-center hover:bg-gray-100 text-gray-500 font-normal text-sm"
                :style="{color: checkTab===idx ? 'red': ''}">
                    {{ele.title}}
                </div>      
            </div>
        </div>
        <div class="md:w-9/12">
            <!-- 内容 -->
            <component :is="isCom"></component>
        </div>
    </div>
</template>